<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #preview {
        max-width: 80%;
      }
    </style>
  </head>
  <body>
    <!-- 上传图片时 , 读取本地图片路径 , 实现快速预览 -->
    <input type="file" />
    <img src="" id="preview" />

    <script>
      const inp = document.querySelector("input");
      console.log(inp);

      inp.onchange = () => {
        const file = inp.files[0];
        // 创建文件服务器
        const reader = new FileReader();
        // 拿到读取的二进制文件 , 赋值给src
        reader.onload = (e) => {
          preview.src = e.target.result;
        };
        reader.readAsDataURL(file);
      };
    </script>
  </body>
</html>
